<script setup>
import ThreeRowsMiddleMain from "@/components/commons/layout/ThreeRowsMiddleMain.vue";
import MenuVerticalSubMenu from "@/components/commons/base/MenuVerticalSubMenu.vue";
import MenuVertical from "@/components/commons/base/MenuVertical.vue";
import { InitMenuItem } from '@/assets/tools/constructors.js'
import MenuHorizontal from "@/components/commons/base/MenuHorizontal.vue";
import { ref } from 'vue'
import { onMounted, onBeforeUnmount } from 'vue'

const mainMenuItems = [
  new InitMenuItem('1000', '会员管理').setSort(1).initDir(),
  new InitMenuItem('1100', '全部会员', '1000').setSort(1.1),
  new InitMenuItem('1200', '办理会员', '1000').setSort(1.2),
  new InitMenuItem('1300', '修改会员', '1000').setSort(1.3),
  new InitMenuItem('1400', '注销会员', '1000').setSort(1.4),
  new InitMenuItem('2000', '用户管理').setSort(2).initDir().setIconClass('i-flowbite-paper-clip-outline').setOpend(true),
  new InitMenuItem('2100', '用户信息管理', '2000').setSort(2.1),
  new InitMenuItem('2200', '用户角色管理', '2000').setSort(2.2),
  new InitMenuItem('2300', '用户权限管理', '2000').setSort(2.3),
  new InitMenuItem('3000', '账目管理').setSort(3),
  new InitMenuItem('4000', '订单管理').setSort(4),
  new InitMenuItem('5000', '服务管理').setSort(5),
]

// TODO: 侧边栏菜单缩放（按钮缩放、响应式缩放）
const collapsed = ref(false)
// collapsed.value = true

// 响应式自动折叠菜单（有bug）
// const checkScreenSize = () => {
//   if (window.innerWidth < 768) { // md 断点
//     collapsed.value = true
//   } else {
//     collapsed.value = false
//   }
// }
// onMounted(() => {
//   window.addEventListener('resize', checkScreenSize)
//   checkScreenSize()
// })
// onBeforeUnmount(() => {
//   window.removeEventListener('resize', checkScreenSize)
// })

</script>

<template>
  <ThreeRowsMiddleMain :container-class="collapsed?'':'w-56'">
    <template #header>
      <MenuHorizontal class="" :is-collapsed="collapsed" @change-collapse="() => collapsed = !collapsed"/>
    </template>
    <template #default>
      <MenuVerticalSubMenu :menu-items="mainMenuItems" :is-collapsed="collapsed"/>
    </template>
    <template #footer>
      <MenuVertical class="bg-base-300" :is-collapsed="collapsed"/>
    </template>
  </ThreeRowsMiddleMain>
</template>

<style scoped>

</style>